<template>
    <div class="Bbox">
        <div class="box1">
        <span class="box2">LOGIN</span>
        <span class="box3">
            <i class="iconfont icon-denglu-copy icon2"></i>
            <input type="text" v-model="username">
        </span>
        <span class="box4">
            <i class="iconfont icon-mima icon2 iconn"></i>
            <input type="password" class="ipt2" v-model="password">
        </span>
        <button class="box5" value="密码" @click="turnToAdmin">登录</button>
        <button class="box6">忘记密码</button>
    </div>
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return {
            username:'',
            password:'',
            token:''
        }
    },
    methods:{
        // 登录的回调函数
        // async turnToAdmin(){
        //     try {
        //         await this.$axios.post("/api/login",{username:this.username,password:this.password})
        //         this.$router.push('/admin')
        //     }
        // }
        async turnToAdmin(){
          // 成功
          let res = await this.$axios.post('http://1.12.58.122:3007/api/login',{username:this.username,password:this.password})
          if(res.data.status !== 0){
            throw new Error('登陆失败:账号或密码不正确')
          }
          if(res.data.status===0){
            sessionStorage.setItem('token','token')
            this.$router.push({
                path:'/admin'
            })
            console.log('登录成功')
          }
        },
    },
    
}      
</script>

<style scoped>
    .Bbox {
        position: absolute;
        top: 8%;
        height: 92%;
        width: 100%;
        font-family: "NLXJ-BODY";
    }
    .box1 {
        position: absolute;
        left: 50%;
        top: 46%;
        transform: translate(-50%,-46%);
        width: 320px;
        height: 350px;
        text-align: center;
        border:solid 1px black;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }
    .box2 {
        position: absolute;
        display: inline-block;
        top: 10%;
        left: 50%;
        transform: translate(-50%);
        font-size: 35px;
        color: aliceblue;
        height: 40px;
        line-height: 40px;
    }
    .box3 {
        position: absolute;
        left: 50%;
        top: 25%;
        transform: translate(-50%);
        display: block;
        height: 50px;
        width: 100%;
        line-height: 50px;
        
    }
    .box4 {
        position: absolute;
        left: 50%;
        top: 38%;
        transform: translate(-50%);
        display: block;
        height: 50px;
        width: 100%;
        line-height: 50px;
    }
    input {
        text-indent: 10px;
        background-color: transparent;
        border: 1px solid white;
        border-radius: 10px;
        border-bottom:solid 1px white;
        height: 20px;
        width: 200px ;
        color: white;
        font-size:15px ;
    }
    .icon2 {
        color:white;
        font-size: 20px;
        margin-right:5px;
    }
    .iconn {
        margin-right:8px;
    }
    .box5 {
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%);
        background-color: transparent;
        border:none;
        width: 120px;
        height: 30px;
        font-size: 15px;
        background: linear-gradient(to right,#edb8b0,#016db4);
        color: black;
        border-radius: 15px;
        cursor: pointer;
        font-family: "NLXJ-BODY";
    }
    .box6 {
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translate(-50%);
        background-color: transparent;
        border:none;
        width: 120px;
        height: 30px;
        font-size: 15px;
        background: linear-gradient(to right,#edb8b0,#016db4);
        color: black;
        border-radius: 15px;
        cursor: pointer;
        font-family: "NLXJ-BODY";
    }
</style>